<template>
  <div style="width: 100%; height: 100%">
    <ElementDialog ref="dialog" embed :visible="visible" title="用户列表">
      <SkeletonPanel>
        <template #left>
          <ElTree
            default-expand-all
            :data="treeData1"
            :props="default_tree_props"
            :expand-on-click-node="false"
            @node-click="handleNodeClick" />
        </template>
        <div style="padding: 6px 10px; text-align: right">
          <ElInput style="width: 200px; margin-right: 10px" />
          <ElButton type="primary">搜索</ElButton>
        </div>
        <div style="padding: 4px 10px; color: #2d8cf0; text-align: right; background-color: #ebeef5">
          <!--          <span style="margin-right: 10px;cursor: pointer;">添加</span>-->
          <span style="cursor: pointer" @click="showDrawer = true">高级搜索</span>
        </div>
        <PageableTable
          ref="PageableTable"
          :api="getPage"
          :data="tableData"
          :selection="selection"
          :multiple="multiple"
          auto-height
          row-key="userId"
          @current-change="handleCurrentChange"
          @selection-change="change">
          <ElTableColumn prop="username" label="登录帐号" />
          <ElTableColumn prop="realName" label="用户姓名" />
          <ElTableColumn prop="deptName" label="所属单位" />
          <ElTableColumn prop="realPhone" label="电话号码" />
          <ElTableColumn prop="email" label="电子邮箱" />
        </PageableTable>
        <ElInput v-model="message" type="textarea" rows="3" placeholder="请输入办理意见" />
      </SkeletonPanel>
      <template #footer>
        <ElButton type="primary" @click="getUserList">确定</ElButton>
      </template>
    </ElementDialog>

    <ElDrawer :visible.sync="showDrawer" title="高级搜索" append-to-body>
      <ElForm ref="form" :model="searchObj" label-width="80px" label-position="right">
        <ElRow class="form-row">
          <ElCol :span="12">
            <ElFormItem prop="username" label="用户姓名">
              <ElInput v-model="searchObj.username" placeholder="请输入标题" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElDrawer>
  </div>
</template>

<script>
  import { fetchList, selectUserList } from '@/api/admin/user'
  import { fetchTree } from '@/api/admin/dept'

  export default {
    name: 'FlowableHandleUserTable',
    props: {
      visible: Boolean,
      selectType: {
        type: String,
        default: 'default'
      },
      selection: {
        type: Boolean,
        default: true
      },
      multiple: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        searchForm: {},
        treeData1: [],
        searchObj: {
          username: ''
        },
        default_tree_props: { label: 'name', value: 'id' },
        showDrawer: false,
        tableData: [],
        currentRow: {},
        message: ''
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        fetchTree().then(response => {
          this.treeData1 = response.data.data
        })
      },
      change(rows) {
        this.rows = rows
      },
      getUserList() {
        if (this.$isBlank(this.message)) {
          this.$message.warning('请输入办理意见！')
          return
        }
        if (this.selection) {
          if (this.$isBlank(this.currentRow)) {
            this.$message.warning('请选择用户信息！')
            return
          }
          this.$emit('getUserList', this.currentRow, this.message)
        } else {
          if (this.$isBlank(this.rows)) {
            this.$message.warning('请选择用户信息！')
            return
          }
          this.$emit('getUserList', this.rows, this.message)
        }
        this.$refs.dialog.hide()
      },
      getPage(page, params) {
        // 选择Userinfo表没有的 user信息
        if (this.selectType !== 'default') {
          return selectUserList(
            Object.assign(
              {
                current: page.currentPage,
                size: page.pageSize
              },
              params,
              this.searchForm
            ),
            this.selectType
          )
        } else {
          return fetchList(
            Object.assign(
              {
                current: page.currentPage,
                size: page.pageSize
              },
              params,
              this.searchForm
            )
          )
        }
      },
      handleCurrentChange(rows) {
        this.currentRow = rows
      },
      handleNodeClick(data) {
        if (this.selectType !== 'default') {
          selectUserList({ current: 1, size: 25, deptId: data.id }, this.selectType).then(response => {
            this.tableData = response.data.data.records
            this.$refs.PageableTable._data.page.total = response.data.data.total
          })
        } else {
          fetchList({ current: 1, size: 25, deptId: data.id }).then(response => {
            this.tableData = response.data.data.records
            this.$refs.PageableTable._data.page.total = response.data.data.total
          })
        }
      }
    }
  }
</script>
